<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import { searchWorkbinMaterial } from '@/api/material-receipt';

  const showDrawer = ref<boolean>(false);
  const booleanStore = useBooleanStore();
  const columns: any[] = [
    {
      title: '缓存箱',
      dataIndex: 'workbinCode',
    },
    {
      title: '数量',
      dataIndex: 'itemQty',
    },
    {
      title: '当前台账剩余数量',
      dataIndex: 'currentQty',
    },

    {
      title: '此缓存箱出库数量',
      dataIndex: 'erpoutQty',
    },
  ];
  // 创建一个响应式的本地副本
  const localTableData = ref<any[]>([]);
  async function searchGKLong() {
    const data = await searchWorkbinMaterial(booleanStore.listTwo[0]);
    localTableData.value = data;
  }

  // 监听弹框
  watch(
    () => booleanStore.boolValue3,
    (newValue: boolean) => {
      if (booleanStore.num3 === 3) showDrawer.value = newValue;
      searchGKLong();
    }
  );

  function afterVisibleChange(val: any) {
    if (!val) {
      booleanStore.toggleBool3(3);
    }
  }
  function handleCancel() {
    booleanStore.toggleBool3(3);
  }
</script>

<template>
  <a-drawer
    :width="450"
    :height="340"
    :visible="showDrawer"
    placement="right"
    @after-visible-change="afterVisibleChange"
    @cancel="handleCancel"
  >
    <template #title> 缓存箱列表 </template>
    <div>
      <a-table
        :stripe="true"
        class="top-table"
        :columns="columns"
        :data="localTableData"
      >
      </a-table>
    </div>
  </a-drawer>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
  }
  .add {
    background-color: #bacf65;
    color: #fff;
  }
  .clear {
    margin-left: 10px;
  }
</style>
